<template>
  <baseCard
    :isCursor="true"
    :height="height"
    :title="'基础设施监控'"
    @handleClick="handlePath"
    style="margin-right: 0; margin-left: 0; margin-bottom: 0.2rem"
  >
    <div class="sm-data-echarts-layout">
      <vptBaseMoniter
        v-bind="baseInfo"
        :screenSize="screenSize"
        :footerHeight="footerHeight"
        :headerHeight="headerHeight"
        :btnStyle="btnStyle"
        :deviceNum="deviceNum"
      ></vptBaseMoniter>
    </div>
    <template v-slot:right>
      <vptSelect
        class="es-select-app"
        :label="'选择应用'"
        :width="1.6"
        :options="options"
        :value="defaultValue"
        @change-tab="onChangeTab"
      ></vptSelect>
    </template>
  </baseCard>
</template>

<script setup>
import { reactive } from "vue";
import baseCard from "@/components/vpt-cards-1001/index.vue";
import vptSelect from "@/components/form/vpt-select/index.vue";
import vptBaseMoniter from "./components/vpt-base-monitor.vue";

const props = defineProps({
  screenSize: {
    type: String,
    default: () => {
      return "largescreen";
    },
  },
  options: { type: Array, default: () => [] },
  defaultValue: { type: String, default: {} },
  baseInfo: { type: Object, default: () => ({}) },
  deviceNum: { type: Object, default: () => ({}) },
  height: { type: String, default: "10.3rem" },
  footerHeight: { type: String, default: "1.4rem" },
  headerHeight: { type: String, default: undefined },
  btnStyle: { type: Object, default: () => ({}) },
});

import { useRouter } from "vue-router";

const router = useRouter();

const handlePath = () => {
  router.push({ path: "/infrastructure" });
};
// const options = reactive([
//     { value: 0, label: '全部' },
//     { value: 1, label: 'app-scrpot' }
// ])

const onChangeTab = (value) => {
  emit("onChangeTab", value);
};

const emit = defineEmits(["onChangeTab"]);
</script>

<style lang="less" scoped>
.sm-data-echarts-layout {
  width: 100%;
  height: 100%;
}
</style>